<template>
  <BvView>
    <BvHeader :center-control="{
	  		title:`上传图片`
		}"/>
    <div class="bz-pd-10">
      <div class="bz-row">
        <div class="bz-pd-b-5">单个</div>
        <div class="bz-row">
					<span v-for="(img,index) in uploadImg">
						<img :src="img" alt="" width="50" height="50">
						<a @click="removeUpload($refs['oneUpload'],uploadImg,index)">删除</a>
					</span>
        </div>
        <div>
          <Upload
                  accept="image/png,image/gif,image/jpeg,image/webp"
                  ref="oneUpload"
                  input-id="input"
                  name="imgFile"
                  post-action="/Upload/index_img"
                  @input-file="inputOneFile"
                  :upload-data="uploadImg"
          >
            <button class="bz-btn bz-btn-primary bz-bd-radius-4">
              单张图片
            </button>
          </Upload>
        </div>
      </div>

      <div class="bz-row">
        <div class="bz-pd-b-5">多个</div>
        <div>

          <div class="bz-row">
					<span v-for="(img,index) in uploadImgs">
						<img :src="img" alt="" width="50" height="50">
						<a @click="removeUpload($refs['upload'],uploadImgs,index)">删除</a>
					</span>
          </div>

          <Upload
                  :multiple="true"
                  accept="image/png,image/gif,image/jpeg,image/webp"
                  ref="upload"
                  input-id="inputs"
                  name="imgFile"
                  post-action="/Upload/index_img"
                  @input-file="inputFile"
                  :maximum="5"
                  :upload-data="uploadImgs"
          >
            <button class="bz-btn bz-btn-primary">上传图片</button>
          </Upload>
        </div>
      </div>
    </div>
  </BvView>
</template>

<script>

  import { uploadMixin } from "$upload";

  export default {
    name: "vue-upload-componet",
    mixins: [uploadMixin()],
    data() {
      return {
        uploadImg: [],
        uploadImgs: []
      }
    },
    methods: {
      inputFile(newFile, oldFile, upload) {
        this.$upload(upload, {
          eventArgs: {
            newFile,
            oldFile
          },
          hooks: {
            success(res) {
              upload.uploadData.push(res.url);
            }
          }
        });
      },
      inputOneFile(newFile, oldFile, upload) {
        this.$upload(upload, {
          eventArgs: {
            newFile,
            oldFile
          },
          hooks: {
            success(res) {
              upload.uploadData.splice(0, 1, res.url);
            }
          }
        });
      },
      removeUpload(upload, lists, index) {
        this.$removeFile(upload, index);
        lists.splice(index, 1);
      }
    }
  }
</script>